'use client'
import { useState, useEffect } from 'react'
import { Button, Label } from 'flowbite-react'
import dynamic from 'next/dynamic'
import { FaSave, FaTimes, FaLightbulb, FaBook } from 'react-icons/fa'

const TipTapEditor = dynamic(() => import('./TipTapEditor'), {
  ssr: false,
  loading: () => (
    <div className="border rounded-lg p-4 min-h-[200px] bg-gray-50 animate-pulse">
      <div className="h-4 bg-gray-200 rounded w-1/4 mb-4"></div>
      <div className="h-4 bg-gray-200 rounded w-1/2 mb-2"></div>
      <div className="h-4 bg-gray-200 rounded w-1/3"></div>
    </div>
  )
})

export default function CardEditor({ deckId, onSave, onCancel }) {
  const [front, setFront] = useState('')
  const [back, setBack] = useState('')
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) return null

  return (
    <div className="space-y-8">
      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-blue-800">
        <div className="flex items-start gap-3">
          <FaLightbulb className="text-xl mt-1" />
          <div>
            <h3 className="font-semibold mb-1">编写提示</h3>
            <ul className="text-sm space-y-1 list-disc list-inside">
              <li>问题应该简洁明确，便于回忆</li>
              <li>答案最好包含完整的解释</li>
              <li>可以添加图片来辅助记忆</li>
            </ul>
          </div>
        </div>
      </div>

      <div>
        <div className="flex items-center gap-2 mb-3">
          <FaBook className="text-blue-500" />
          <Label className="text-lg font-semibold text-gray-900">正面内容</Label>
        </div>
        <p className="text-sm text-gray-500 mb-4">输入问题或需要记忆的内容</p>
        <div className="shadow-sm">
          <TipTapEditor content={front} onChange={setFront} />
        </div>
      </div>

      <div>
        <div className="flex items-center gap-2 mb-3">
          <FaBook className="text-green-500" />
          <Label className="text-lg font-semibold text-gray-900">背面内容</Label>
        </div>
        <p className="text-sm text-gray-500 mb-4">输入答案或解释</p>
        <div className="shadow-sm">
          <TipTapEditor content={back} onChange={setBack} />
        </div>
      </div>

      <div className="flex justify-end gap-3 pt-6 border-t">
        <Button 
          color="gray" 
          onClick={onCancel}
          className="px-6"
          size="lg"
        >
          <FaTimes className="mr-2" />
          取消
        </Button>
        <Button 
          color="blue" 
          onClick={() => onSave({ 
            front, 
            back, 
            deck: deckId, 
            nextReview: new Date(), 
            interval: 0, 
            easeFactor: 2.5 
          })}
          className="px-6"
          size="lg"
        >
          <FaSave className="mr-2" />
          保存
        </Button>
      </div>
    </div>
  )
}